<template>
  <div :class="styles['enter-store']">
    <el-tabs
        v-model="currentTab"
        type="card"
        @tab-click="handleClick"
    >
      <el-tab-pane v-for="(pane, index) in tabPaneList" :key="pane.name" :name="index">
        <template #label>
          <el-badge :value="pane.badge" :max="99" :show-zero="false">
            <span>{{ pane.label }} &nbsp;</span>
          </el-badge>
        </template>
      </el-tab-pane>
      <component :is="tabPaneList[currentTab].component"/>
    </el-tabs>
  </div>
</template>

<script setup name="EnterStore">
import {ref, onMounted, computed} from 'vue'
import Signature from './Signature'
import FirstReview from './FirstReview'
import Review from './Review'
import PutStore from './PutStore'
import SendCard from './SendCard'
import ReturnGoods from './ReturnGoods'
import ALLPutStore from './ALLPutStore'
import {getOrderCountApi} from '@/service/enterStore'

// 订单数枚举
const orderCount = ref({})
// tab选项卡
const tabPaneList = computed(() => {
  const {firstReviewCount, returnCount, reviewCount, stockCount} = orderCount.value
  return [
    {
      label: '快递签收',
      badge: 0,
      name: 'Signature',
      component: Signature
    },
    {
      label: '开箱初审',
      badge: firstReviewCount,
      name: 'FirstReview',
      component: FirstReview
    },
    {
      label: '待复核订单',
      badge: reviewCount,
      name: 'Review',
      component: Review
    },
    {
      label: '待入库订单',
      badge: stockCount,
      name: 'PutStore',
      component: PutStore
    },
    {
      label: '待回寄卡牌订单',
      badge: returnCount,
      name: 'SendCard',
      component: SendCard
    },
    {
      label: '退货入库',
      badge: 0,
      name: 'ReturnGoods',
      component: ReturnGoods
    },
    {
      label: '全部已入库订单',
      badge: 0,
      name: 'ALLPutStore',
      component: ALLPutStore
    }
  ]
})
// 当前tab
const currentTab = ref(0)
// tab切换
function handleClick (pane, ev) {
  // console.log('tab切换', pane, ev)
}
// 获取订单数据
async function getOrderCount () {
  const res = await getOrderCountApi()
  if (res.code === __code) {
    orderCount.value = res.data
  }
}

onMounted(() => {
  getOrderCount()
})

</script>

<style lang="less" src="./index.less" module="styles"></style>
